<template>
	<view class="container">
		<view class="form-section">
			<view class="form-item">
				<text class="label">姓名</text>
				<input class="input" placeholder="请输入" v-model="formData.name" />
			</view>
			<view class="form-item">
				<text class="label">联系电话</text>
				<input class="input" placeholder="请输入" v-model="formData.phone" />
			</view>
			<view class="form-item">
				<text class="label">备用联系方式</text>
				<input class="input" placeholder="请输入" v-model="formData.backupContact" />
			</view>
			<view class="form-item">
				<text class="label">酒店地址</text>
				<input class="input" placeholder="请输入" v-model="formData.hotelAddress" />
			</view>
		</view>
		<!-- Participants -->
		<view class="form-section">
			<text class="section-title">报名人数</text>
			<view class="participant-row" v-for="(participant, index) in formData.participant" :key="index">
				<view class="participant-label-container">
					<text class="participant-label">{{ participant.label }}</text>
					<text class="participant-price">￥{{ participant.price }}</text>
				</view>
				<view class="counter">
					<button class="button" @click="decrement(index)">-</button>
					<text class="count">{{ participant.count }}</text>
					<button class="button" @click="increment(index)">+</button>
				</view>
			</view>
		</view>
		<!-- 旅游线路 -->
		<view class="form-section">
			<text class="section-title">旅游线路(可多选)</text>
			<view class="route-grid">
				<view class="route-item" v-for="(route, index) in availableRoutes" :key="route.id">
					<image :src="route.image" class="route-image" />
					<view class="route-info">
						<text class="route-label">{{ route.name }}</text><br />
						<text class="route-price">￥{{ route.price }}</text>
					</view>
					<uv-checkbox-group>
						<uv-checkbox :customStyle="{marginBottom: '8px'}" shape="circle" class="route-checkbox"
							:checked="formData.selectedRoutes.includes(route.id)" :value="route.id"
							@change="toggleRoute(route.id)"></uv-checkbox>
					</uv-checkbox-group>
				</view>
			</view>
		</view>
		<view class="total">
			<text class="title">合计: <text style="color: red;">¥{{ total }}</text></text>
			<button class="submit-button" @click="submit">提交</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				formData: {
					name: '',
					phone: '',
					backupContact: '',
					hotelAddress: '',
					participant: [{
							label: '成人',
							price: 148,
							count: 1
						},
						{
							label: '老人学生',
							price: 100,
							count: 1
						},
						{
							label: '儿童(一米三以下)',
							price: 50,
							count: 1
						},
					],
					selectedRoutes: []
				},
				availableRoutes: [{
						id: 1,
						name: '旅顺一日游',
						price: 198,
						image: 'path/to/image1.jpg'
					},
					{
						id: 2,
						name: '金石滩滨海风光一日游',
						price: 198,
						image: 'path/to/image2.jpg'
					},
					{
						id: 3,
						name: '大连市区游',
						price: 198,
						image: 'path/to/image3.jpg'
					},
					{
						id: 4,
						name: '丹东',
						price: 198,
						image: 'path/to/image4.jpg'
					},
					{
						id: 5,
						name: '鞍山',
						price: 198,
						image: 'path/to/image5.jpg'
					},
					{
						id: 6,
						name: '山谷半岛',
						price: 198,
						image: 'path/to/image6.jpg'
					},
				],
				total: 0
			}
		},
		watch: {
			'formData.selectedRoutes': {
				handler() {
					this.calculateTotal();
				},
				deep: true
			},
			'formData.participant': {
				handler() {
					this.calculateTotal();
				},
				deep: true
			}
		},
		mounted() {
			this.calculateTotal();
		},
		methods: {
			increment(index) {
				this.formData.participant[index].count++;
			},
			decrement(index) {
				if (this.formData.participant[index].count > 0) {
					this.formData.participant[index].count--;
				}
			},
			toggleRoute(routeId) {
				const index = this.formData.selectedRoutes.indexOf(routeId);
				if (index > -1) {
					this.formData.selectedRoutes.splice(index, 1);
				} else {
					this.formData.selectedRoutes.push(routeId);
				}
			},
			calculateTotal() {
				const participantTotal = this.formData.participant.reduce((sum, participant) => sum + (participant.count *
					participant.price), 0);
				const routeTotal = this.formData.selectedRoutes.reduce((sum, routeId) => {
					const route = this.availableRoutes.find(route => route.id === routeId);
					return sum + (route ? route.price : 0);
				}, 0);
				this.total = participantTotal + routeTotal;
			},
			submit() {
				// handle form submission
				console.log('Form submitted', this.formData);
				uni.request({
					url: 'https://huaqing.xgxtravel.com/api/tourist/insert',
					method: 'POST',
					data: this.formData,
					header: {
						'content-type': 'application/json',
					},
					success: (res) => {
						console.log("预定成功：", res.data);
					},
					fail: (res) => {
						console.error('预定失败', err);
					}
				})
			}
		}
	}
</script>

<style>
	.container {
		padding: 16px;
	}

	.form-section {
		margin-bottom: 16px;
	}

	.form-item {
		margin-bottom: 16px;
	}

	.container .section-title {
		font-size: 32rpx;
		font-weight: bold;
		margin-bottom: 20rpx;
	}

	.participant-row {
		display: flex;
		align-items: center;
		justify-content: space-between;
		/* 确保子项在行内左右对齐 */
		margin-bottom: 20rpx;
	}

	.participant-label-container {
		display: flex;
		flex-direction: row;
		flex: 1;
		/* 占据剩余空间，使文本左对齐 */
	}


	.participant-label {
		font-size: 28rpx;
	}

	.participant-price {
		font-size: 28rpx;
		color: red;
		margin-left: 10rpx;
	}


	.route-grid {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-gap: 20rpx;
	}

	.route-item {
		position: relative;
		border: 1px solid #ddd;
		border-radius: 10rpx;
		overflow: hidden;
	}

	.route-image {
		width: 100%;
		height: 150rpx;
		object-fit: cover;
	}

	.route-info {
		padding: 10rpx;
	}

	.route-label {
		font-size: 28rpx;
		margin-bottom: 5rpx;
	}

	.route-price {
		font-size: 24rpx;
	}


	.route-checkbox {
		position: absolute;
		top: 10rpx;
		right: 10rpx;
	}

	.counter {
		display: flex;
		align-items: center;
	}

	.button {
		width: 50rpx;
		height: 50rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #f0f0f0;
		border: none;
		font-size: 32rpx;
	}

	.count {
		width: 40rpx;
		text-align: center;
		font-size: 28rpx;
		border: 1px solid #a1a1a1
	}


	.label {
		display: block;
		margin-bottom: 8px;
		font-weight: bold;
	}

	.input {
		width: 100%;
		padding: 8px;
		border-radius: 4px;
		background-color: #f6f7fb;
	}

	.quantity-control {
		display: flex;
		align-items: center;
		margin-bottom: 8px;
	}

	.quantity-control text {
		margin-right: 8px;
	}

	.quantity-control .counter button,
	.quantity-control .counter text {
		float: left;
		margin-left: 30rpx;
	}

	.total {
		width: 100vw;
		margin-left: -30rpx;
		height: 120rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
	}

	.total .title {
		margin-left: 30rpx;
	}

	.submit-button {
		width: 200rpx;
		height: 80rpx;
		font-size: 30rpx;
		line-height: 50rpx;
		padding: 8px 16px;
		background-color: #007aff;
		color: white;
		border: none;
		border-radius: 10px;
		margin-left: 330rpx;
	}
</style>